<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>场景秀</title>
    <meta name="viewport" content="width=device-width,initial-scalable=1,user-scalable=no">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="container">
        <img src="images/fish.png" class="big-fish">
        <img src="images/text.png" class="text">
        <img src="images/ice.png" class="ice">
        <div class="water"></div>
        <img src="images/first-fish.png" class="first-fish">
        <img src="images/second-fish.png" class="second-fish">
        <img src="images/bubble.png" class="bubble">
        <img src="images/weixin.png" class="weixin">
        <div class="musicPlay" onclick="playPause()"></div>
        <!--通过audio标签加载音频-->
        <!--loop:循环播放-->
        <!--preload：页面加载时进行加载，预播放。-->
        <audio id="music" loop preload="preload">
            <source src="images/music.mp3">
            你的浏览器不支持HTML5，换个浏览器吧！   
        </audio>
    </div>

</body>
</html>
<script>
    // 通过id获取audio标签
    var audio = document.getElementById('music')
    var musicPlay = document.getElementsByClassName('musicPlay')[0]
    function playPause(){
        // 判断音频是否正在播放
        // paused:暂停
        // audio.paused获取到的值有两种情况：（1）true，暂停；（2）false，播放。
        if(audio.paused == true){
            // 如果音频是暂停的，那么就播放。
            musicPlay.style.backgroundImage = "url(images/sound.png)";
            audio.play();

        }
        else{
            // 否则，就暂停
            musicPlay.style.backgroundImage = "url(images/muted.png)";
            audio.pause();
        }
    }
</script>